1
|
|
|
/* |
2
|
|
|
* This file is part of the PHP Translation package. |
3
|
|
|
* |
4
|
|
|
* (c) PHP Translation team <[email protected]> |
5
|
|
|
* |
6
|
|
|
* For the full copyright and license information, please view the LICENSE |
7
|
|
|
* file that was distributed with this source code. |
8
|
|
|
*/ |
9
|
|
|
(function () { |
10
|
|
|
if (typeof customElements.define !== "undefined") { |
|
|
|
|
11
|
|
|
customElements.define("x-trans", HTMLElement); |
|
|
|
|
12
|
|
|
|
13
|
|
|
return; |
14
|
|
|
} |
15
|
|
|
|
16
|
|
|
document.registerElement("x-trans", { |
17
|
|
|
prototype: Object.create(HTMLElement.prototype) |
18
|
|
|
}); |
19
|
|
|
})(); |
20
|
|
|
|
21
|
|
|
/** |
22
|
|
|
* TranslationBundleEditInPlace boot the ContentTools editor and handle saves. |
23
|
|
|
* |
24
|
|
|
* @author Damien Alexandre <[email protected]> |
25
|
|
|
* @param saveUrl The AJAX API Endpoint |
26
|
|
|
*/ |
27
|
|
|
var TranslationBundleEditInPlace = function(saveUrl) { |
28
|
|
|
var editor, httpRequest; |
29
|
|
|
|
30
|
|
|
/* Tools for HTML blocks - no image or video support */ |
31
|
|
|
var HTML_TOOLS = [ |
32
|
|
|
[ |
33
|
|
|
'bold', |
34
|
|
|
'italic', |
35
|
|
|
'link', |
36
|
|
|
'align-left', |
37
|
|
|
'align-center', |
38
|
|
|
'align-right' |
39
|
|
|
], [ |
40
|
|
|
'heading', |
41
|
|
|
'subheading', |
42
|
|
|
'paragraph', |
43
|
|
|
'unordered-list', |
44
|
|
|
'ordered-list', |
45
|
|
|
'table', |
46
|
|
|
'indent', |
47
|
|
|
'unindent', |
48
|
|
|
'line-break' |
49
|
|
|
], [ |
50
|
|
|
'undo', |
51
|
|
|
'redo', |
52
|
|
|
'remove' |
53
|
|
|
] |
54
|
|
|
]; |
55
|
|
|
|
56
|
|
|
/* Tools for basic string, no HTML allowed */ |
57
|
|
|
var STRING_TOOLS = [ |
58
|
|
|
[ |
59
|
|
|
'undo', |
60
|
|
|
'redo' |
61
|
|
|
] |
62
|
|
|
]; |
63
|
|
|
|
64
|
|
|
// Set the default to SIMPLE |
65
|
|
|
ContentTools.DEFAULT_TOOLS = STRING_TOOLS; |
|
|
|
|
66
|
|
|
editor = ContentTools.EditorApp.get(); |
67
|
|
|
editor.init('x-trans', 'data-key', function(domRegion) { |
68
|
|
|
// true = fixture (string of text) |
69
|
|
|
// false = classic HTML block |
70
|
|
|
return domRegion.dataset.key.split('.').pop() !== 'html'; |
71
|
|
|
}); |
72
|
|
|
|
73
|
|
|
// Treat x-trans tags as Text |
74
|
|
|
ContentEdit.TagNames.get().register(ContentEdit.Text, 'x-trans'); |
|
|
|
|
75
|
|
|
|
76
|
|
|
// Save to backend |
77
|
|
|
editor.addEventListener('saved', function(ev) { |
78
|
|
|
if (Object.keys(ev.detail().regions).length === 0) { |
79
|
|
|
return; |
80
|
|
|
} |
81
|
|
|
|
82
|
|
|
doSave(ev.detail().regions); |
83
|
|
|
}); |
84
|
|
|
|
85
|
|
|
function doSave(regions) { |
86
|
|
|
editor.busy(true); |
87
|
|
|
|
88
|
|
|
httpRequest = new XMLHttpRequest(); |
89
|
|
|
if (!httpRequest) { |
90
|
|
|
alert('Giving up :( Cannot create an XMLHTTP instance'); |
|
|
|
|
91
|
|
|
return false; |
92
|
|
|
} |
93
|
|
|
|
94
|
|
|
httpRequest.onreadystatechange = function() { |
95
|
|
|
if (httpRequest.readyState === XMLHttpRequest.DONE) { |
96
|
|
|
editor.busy(false); |
97
|
|
|
|
98
|
|
|
if (httpRequest.status === 200) { |
99
|
|
|
new ContentTools.FlashUI('ok'); |
|
|
|
|
100
|
|
|
} else if (httpRequest.status === 400) { |
101
|
|
|
alert(httpRequest.responseText); |
|
|
|
|
102
|
|
|
new ContentTools.FlashUI('no'); |
|
|
|
|
103
|
|
|
} else { |
104
|
|
|
alert('Error: we could not save the translations! Please retry.'); |
105
|
|
|
new ContentTools.FlashUI('no'); |
|
|
|
|
106
|
|
|
} |
107
|
|
|
} |
108
|
|
|
}; |
109
|
|
|
|
110
|
|
|
httpRequest.open('POST', saveUrl, true); |
111
|
|
|
httpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); |
112
|
|
|
httpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); |
113
|
|
|
httpRequest.send(JSON.stringify(regions)); |
|
|
|
|
114
|
|
|
} |
115
|
|
|
|
116
|
|
|
// On focus, change the tools |
117
|
|
|
ContentEdit.Root.get().bind('focus', function(element) { |
118
|
|
|
// @todo Display the translation key & placeholder somewhere in the UI? |
119
|
|
|
var tools; |
120
|
|
|
|
121
|
|
|
if (element.isFixed()) { |
122
|
|
|
tools = STRING_TOOLS; |
123
|
|
|
} else { |
124
|
|
|
tools = HTML_TOOLS; |
125
|
|
|
} |
126
|
|
|
|
127
|
|
|
if (editor.toolbox().tools() !== tools) { |
|
|
|
|
128
|
|
|
return editor.toolbox().tools(tools); |
129
|
|
|
} |
130
|
|
|
}); |
131
|
|
|
|
132
|
|
|
// Any click on links / button... should prevent default if editing is on |
133
|
|
|
document.addEventListener('click', function(event) { |
134
|
|
|
event = event || window.event; |
135
|
|
|
var target = event.target || event.srcElement; |
136
|
|
|
|
137
|
|
|
while (target) { |
138
|
|
|
// Disable the default behavior on some active elements |
139
|
|
|
if (target instanceof HTMLAnchorElement || target instanceof HTMLButtonElement || target instanceof HTMLLabelElement) { |
|
|
|
|
140
|
|
|
if(ContentTools.EditorApp.get().isEditing()) { |
|
|
|
|
141
|
|
|
// Link or button found, prevent default! |
142
|
|
|
event.preventDefault(); |
143
|
|
|
event.stopPropagation(); |
144
|
|
|
} |
145
|
|
|
break; |
146
|
|
|
} |
147
|
|
|
|
148
|
|
|
target = target.parentNode; |
149
|
|
|
} |
150
|
|
|
}, true); |
151
|
|
|
}; |
152
|
|
|
|
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.